﻿<template>
    <div class="layout-main">
        <el-row style="margin-bottom:12px">
            <el-button size="small" v-on:click="add()" type="primary">添加</el-button>
            <el-button size="small" v-on:click="gen()" type="primary">生成菜单</el-button>
            <el-button size="small"  v-on:click="search()" type="primary">重新加载</el-button>
        </el-row>
        <Table :loading="loading" :columns="columns" :data="wxMenus" border>
        </Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'WxMenu',
    data() {
        return {
            loading: false,

            queryParams: {

            },
            others: {

            },
            wxMenu: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 20
            },
            wxMenus: [

            ],
            roles: [],
            columns: [{
                    title: '菜单名字',
                    key: 'name',
                    width: 130,
                    align: 'center'
                }, {
                    title: '菜单类型',
                    key: 'type',
                    width: 130,
                    align: 'center'
                }, {
                    title: '上级菜单',
                    key: 'parentName',
                    width: 130,
                    align: 'center'
                }, {
                    title: '动作',
                    key: 'url',

                    align: 'center',
                    render: (h, params) => {
                        var type = params.row.type;
                        var htmls = [];
                        if (type == "click") {
                            htmls.push(h("span", {}, "关键字回复"));
                            htmls.push(h("span", { style: { display: "block" } }, params.row.key));
                        } else
                        if (type == "view") {
                            htmls.push(h("span", {}, "跳转页面"));
                            htmls.push(h("span", { style: { display: "block" } }, params.row.url));
                        } else
                            htmls.push(h("span", {}, "打开小程序"));
                        return h("div", htmls);
                    }
                }, {
                    title: '排序',
                    key: 'sortIndex',
                    width: 130,
                    align: 'center'
                }, {
                    title: '操作',
                    key: 'state',
                    width: 180,
                    align: 'center',
                    render: (h, params) => {
                        var row = params.row;
                        return h("div", [
                            h("Button", { style: { marginRight: "5px" }, props: { size: "small", type: "error" }, on: { click: () => { this.delete(row.id); } } }, "删除"),
                            h("Button", { style: { marginRight: "5px" }, props: { size: "small" }, on: { click: () => { this.edit(row); } } }, "修改")
                        ]);
                    }
                }

            ]
        };
    },
    mounted: function() {
        this.getList();

    },
    methods: {
        
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/sys/wxmenu/getList.action", params).then(response => {
                var body = response;
                debugger;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.wxMenus = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        delete: function(id) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.$http.post("/sys/wxmenu/doDelete.action", { id: id }).then(response => {
                        var body = response;
                        if (body.status == 0) {
                            me.getList();

                        } else {
                            me.errorMessage("操作异常!" + body.info);
                        }
                    }, response => {

                    });
                },
                onCancel: function() {

                }
            });
        },
        edit: function(row) {
            this.$router.push({ name: "WxMenuEdit", params: { wxMenuId: row.id } });
        },
        add: function() {
            this.$router.push({ name: "WxMenuAdd" });
        },
        gen: function() {
            var me = this;
            me.showLoading();
            me.$http.post("/sys/wxmenu/genMenu.action").then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("生成成功");

                } else {
                    me.errorMessage("操作异常!" + body.info);
                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        },
        sendTemplate: function() {
            var me = this;
            me.showLoading();
            me.$http.post("/sys/wxmenu/sendtp.action").then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("生发送成功");

                } else {
                    me.errorMessage("操作异常!" + body.info);
                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        }
    }
}
</script>
<style scoped>
</style>